<template>
  <div style="padding: 0;margin: 0" v-loading="loading">
    <el-row style="margin: 5px 0">
      <el-col :span="7" :offset="9" style="padding-left: 2%">
        餐饮类别：
        <el-select @change="change" v-model="selectedTypes" placeholder="请选择">
          <el-option
              label="所有"
              value="">
          </el-option>
          <el-option
              v-for="i in types"
              :key="i"
              :label="i"
              :value="i">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div ref="mapChart" style="width: 100%;height: 85vh"></div>
  </div>
</template>

<script>

import 'echarts/dist/extension/bmap.min'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/dataZoom'

import 'echarts/lib/component/title'
import request from "@/utils/request";


export default {
  name: "index",
  data() {
    return {
      types: [],
      selectedTypes: '',
      loading: true,
      process: 0,
      data: []
    }
  },
  created() {
    this.getTypes()
    this.init()
  },

  methods: {
    getTypes() {
      request({
        url: '/data/types',
        method: 'GET',
      }).then(v => {
        this.types = v.data
      })
    },
    init() {
      this.loading = true
      request({
        url: '/data/lngAndLat',
        method: 'GET',
        params: {type: this.selectedTypes}
      }).then(v => {
        this.data = v.data
        this.initMap()
        this.loading = false
      })
    },
    initMap() {
      const chart = echarts.init(this.$refs.mapChart);
      const colors = {}
      const option = {
        tooltip: {
          trigger: 'item'
        },
        animation: false,
        bmap: {
          center: [121.8, 31.10],
          zoom: 10,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                "featureType": "water",
                "elementType": "all",
                "stylers": {
                  "color": "#044161"
                }
              },
              {
                "featureType": "land",
                "elementType": "all",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "boundary",
                "elementType": "geometry",
                "stylers": {
                  "color": "#064f85"
                }
              },
              {
                "featureType": "railway",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "highway",
                "elementType": "geometry",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "highway",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#005b96",
                  "lightness": 1
                }
              },
              {
                "featureType": "highway",
                "elementType": "labels",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "geometry",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#00508b"
                }
              },
              {
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "green",
                "elementType": "all",
                "stylers": {
                  "color": "#056197",
                  "visibility": "off"
                }
              },
              {
                "featureType": "subway",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "manmade",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "local",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "labels",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "boundary",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#029fd4"
                }
              },
              {
                "featureType": "building",
                "elementType": "all",
                "stylers": {
                  "color": "#1a5787"
                }
              },
              {
                "featureType": "label",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              }
            ]
          }
        },

        backgroundColor: 'transparent',
        series: [
          {
            name: '餐馆空间位置分布图',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: [],
            symbolSize: 6,
            label: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            itemStyle: {
              color: 'purple'
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
        ]
      };
      chart.setOption(option);

      const message = this.$message({
        message: `加载数据中...`,
        duration: 0
      })

      chart.on('finished', function () {
        message.close()
      });

      chart.appendData({
        seriesIndex: 0,
        data: this.data.map(v => {
          let color;
          if (colors[v._1]) {
            color = colors[v._1]
          } else {
            color = this.color16Random()
            colors[v._1] = color
          }
          return {
            value: [v._2._1, v._2._2],
            itemStyle: {
              color: color
            }
          }
        })
      })
      chart.resize();
    },
    change(type) {
      this.init()
    },
    color16Random() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return '#' + r.toString(16) + g.toString(16) + b.toString(16);
    }

  }
}
</script>

<style scoped>

</style>
<style>
.anchorBL {
  display: none;
}
</style>
